﻿@model Inovout.Membership.Security.DynamicPasswordCredential
@using System.Web.Optimization
@{
    
    Layout = "~/Views/Layout/_MobileLayout.cshtml";
   
}
@section customStyle{
    <style>
        .body-from {
            margin-top: 30px;
            position: relative;
        }
        #phone, #code {
            padding-left: 30px;
            line-height: 34px;
        }

        .body-from a {
            position: absolute;
            background-color: gray;
            color: white;
            right: 30px;
            display: inline-block;
            height: 25px;
            line-height: 25px;
            width: 90px;
            text-align: center;
            top: 4px;
            border: 1px solid transparent;
            border-radius: 2px;
        }

        .form-message {
          height:30px;
        }

        #formsubmit {
            background-color: gray;
            color: white;
        }

        .form-footer span {
            display: none;
        }

        #formsubmit {
          width:100%;
        }
    </style>
}
@section customScript{
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script type="text/javascript">
        var pageLogic = {};
        $(document).ready(function () {
            $("#phone").focus(function () {
                $("#formsubmit").css("background-color", "#0D8CF5");
                $("#formsubmit").css("color", "white");
                $("#a_code").css("background-color", "#F89307");
                $("#a_code").css("color", "white");
            })

            $("#a_code").click(function () {
                if (!$("#phone").val()) {
                    $("#dynamicForm").submit();

                } else {
                    pageLogic.GetPassWord();
                }
                return false;
            })
        })

        pageLogic.GetPassWord = function () {
            $.ajax({
                url: '@Url.Action("GetDynamicPassword", new { ran = new Random().Next(1000) })',
                dataType: "json",
                type: "GET",
                data: { phone: $("#phone").val() },
                success: function (data) {
                    $("#code").val(data.Code);
                    $("#code").focus();
                     $("#formsubmit").focus();
                }
            });
        }

    </script>
}


@using (Html.BeginForm("DynamicPassword", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal",@id="dynamicForm"  }))
{      
    <div class="form-group body-from">
        <div class="col-xs-12" id="phoediv">
            @Html.TextBoxFor(x => x.Phone, new { @class = "form-control", @placeholder = "请输入手机号码", @id = "phone" })
        </div>
        @Html.ActionLink("获取验证码", "GetDynamicPassword", null, new { @id = "a_code" })
        <div class="col-xs-12 form-message">
            @Html.ValidationMessageFor(x => x.Phone)
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-12">
            @Html.TextBoxFor(x => x.Code, new { @class = "form-control", @placeholder = "请输入验证码", @id = "code" })
        </div>
        <div class="col-xs-12 form-message">
            @Html.ValidationMessageFor(x => x.Code)
        </div>
    </div>
    <div class="form-footer">
        <button type="submit" id="formsubmit" class="btn btn-default">立即加入</button>
    </div>
  
}

